<template>
    <div>
        <div class="jiben">
            <div class="jiben-h">
                <span>基本信息</span>
            </div>
            <div class="jiben-t">
                <el-form :inline="true" :model="formData" class="demo-form-inline shuru">
                    <el-form-item>
                        <el-form-item label="订单类型:">
                            <el-input v-model="formData.orderType" placeholder=""></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-form-item label="客户名称:">
                            <el-input v-model="formData.clientName" placeholder=""></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-form-item label="业务员：">
                            <el-input v-model="formData.salesman" placeholder=""></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="出货仓库：">
                        <el-input v-model="formData.wareHouse" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>

                        <el-form-item label="发货日期：">
                            <el-input v-model="formData.createTime" placeholder=""></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>

                        <el-form-item label="销售类型：">
                            <el-input v-model="formData.sellType" placeholder=""></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="配送车辆：">
                        <el-input v-model="formData.car" placeholder=""></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="list-z">
            <div class="jiben-h">
                <span>选择商品</span>
            </div>
            <div class="jiben-t">
                <el-form :inline="true" :model="formInline" class="demo-form-inline shuru">
                    <el-form-item label="商品名称：">
                        <el-input type="text" v-model="keyWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchList">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="jiben-list">
                    <div class="list-hard">
                        <span>搜索结果</span>
                    </div>
                    <div>
                        <div class="list-top">
                            <div class="list-content">
                                <el-table ref="multipleTable" :data="searchData" border tooltip-effect="dark"
                                    style="width: 100%" @selection-change="handleSelectionChange">
                                    <el-table-column prop="name" label="商品名称" width="200">
                                    </el-table-column>
                                    <el-table-column prop="bigUnit" label="大单位" width="100">
                                    </el-table-column>
                                    <el-table-column prop="bigPrice" label="大单位单价" width="150">
                                    </el-table-column>
                                    <el-table-column prop="smallUnit" label="小单位" width="100">
                                    </el-table-column>
                                    <el-table-column prop="smallPrice" label="小单位单价" width="150">
                                    </el-table-column>
                                    <el-table-column prop="inventory" label="现有库存" width="100">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button type="text" class="brand-look" @click="addList(scope.row.id)">添加
                                            </el-button>
                                            <el-button type="text" class="brand-edit" @click="addgitf(scope.row.id)">赠品
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                            </div>
                        </div>

                    </div>
                    <div class="clear">
                        <div class="list-foot">
                            <el-pagination @current-change="currentchange" :current-page="page" background=" #1ABC9C"
                                layout="prev, pager, next" :total="total" class="footer">
                            </el-pagination>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="shangpin">
            <div class="jiben-h">
                <span>商品明细</span>
            </div>
            <div class="list-content">
                <el-table ref="multipleTable" :data="Commodity" border tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column prop="name" label="商品名称" width="120">
                    </el-table-column>
                    <el-table-column prop="bigUnit" label="单价/大单位" width="150">
                    </el-table-column>
                    <el-table-column label="数量" width="120">
                        <template slot-scope="scope">
                            <span @click="
                            decrease(
                                scope.row.bigCount,
                                scope.row.id,
                                scope.row.smallCount
                            )" class="icon">-</span>
                            <span class="icon-num">{{ scope.row.bigCount }}</span>
                            <span @click="
                                increase(
                                    scope.row.bigCount,
                                    scope.row.id,
                                    scope.row.smallCount
                                )
                            " class="icon">+</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="smallUnit" label="小单位价格" width="120">
                    </el-table-column>
                    <el-table-column label="数量" width="120">
                        <template slot-scope="scope">
                            <span @click="
                                reduce(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                            " class="icon">-</span>
                            <span class="icon-num">{{ scope.row.smallCount }}</span>
                            <span @click="
                                raise(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                            " class="icon">+</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="money" label="金额" width="120">
                    </el-table-column>
                    <el-table-column prop="protectedDate" label="生产日期" width="200">
                    </el-table-column>
                    <el-table-column prop="goodsType" label="商品类型" width="120">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" class="brand-edit" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px;height:20px;">
                    <h3 style=" float: left; margin-right:50px;">商品共:{{ getnumber }}</h3>
                    <h3 style=" float: left;">金额合计:{{ getMoney }}元</h3>
                </div>
            </div>

        </div>
        <div>
            <div class="jiben-h">
                <span>付款信息</span>
            </div>
            <div class="jiben-t">
                <el-form :model="formData" class="demo-form-inline" style=" width: 200px;">
                    <el-form-item label="付款类型:">
                        <el-select v-model="formData.paymentTypes" placeholder="">
                            <el-option label="微信" value="weixing"></el-option>
                            <el-option label="支付宝" value="zhifubao"></el-option>
                            <el-option label="云闪付" value="yunshanfu"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠金额:">
                        <el-input v-model="formData.user" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <h3>应付金额： {{ count }}元</h3>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.jiben-h {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    background-color: rgba(243, 243, 243);
    line-height: 48px;
    padding: 0 5%;
}

.jiben-t {
    border: 1px solid rgb(228, 228, 228);
    padding: 0 5%;
}

.shuru {
    padding-top: 20px;

    .shuru-s {
        padding-right: 100px;
        padding-left: 10px;
    }
}

.list-z {
    padding-top: 10px;

}

.jiben-list {
    border: 1px solid rgb(228, 228, 228);
    margin-bottom: 60px;

    .list-hard {
        border: 1px solid rgb(228, 228, 228);
        height: 48px;
        background-color: rgba(243, 243, 243);
        line-height: 48px;
        padding: 0 5%;
    }
}

.icon {
    display: inline-block;
    font-size: 30px;
    padding: 0 10px;
}

.icon-num {
    display: inline-block;
    font-size: 18px;
}

.footer {
    float: right;
    padding-top: 20px;
    height: 40px;
}

.shangpin {
    padding-top: 20px;
}

.list-content {
    padding-bottom: 60px;
}
</style>
<script>
import { searchApi, searchlistApi, CommodityApi, delDindanApi, addListApi, addgitfApi, increaseDApi, submitEditApi } from "@/http/xiaoShou/addList.js";
export default {
    data() {
        return {
            formData: {
                // car: "",
                // clientName: "",
                // clientType: "",
                // createTime:"",
                // id:'',
                // money:"",
                // orderType: "",
                // paymentTypes: "",
                // salesman: "",
                // sellType: "",
                // wareHouse: ""

            },
            form: {},
            formInline: [],
            searchData: [],
            page: 1,
            size: 5,
            total: 0,
            keyWord: '',
            Commodity: [],
        }
    },
    created() {
        this.getInto(this.page, this.size);
        this.CommodityList()
    },
    activated() {
        this.formData = this.$route.query.row
    },
    deactivated() {
        this.formData = {}
    },
    methods: {
        // 大单位添加
        increase(bigCount, id, smallCount) {
            bigCount = bigCount + 1;
            console.log(55);
            increaseDApi(bigCount, id, smallCount).then((res) => {
                console.log(res, "增加 ");
                this.CommodityList()
            });
        },
        // 大单位减少
        decrease(bigCount, id, smallCount) {
            if (bigCount >= 1) {
                bigCount = bigCount - 1;
                increaseDApi(bigCount, id, smallCount).then((res) => {
                    console.log(res, "减少 ");
                    this.CommodityList()
                });
            } else {
                bigCount;
            }
        },
        // 小单位添加
        raise(bigCount, id, smallCount) {
            smallCount = smallCount + 1;
            increaseDApi(bigCount, id, smallCount).then(() => {
                this.CommodityList()
            });
        },
        // 小单位减少
        reduce(bigCount, id, smallCount) {
            if (bigCount >= 1) {
                smallCount = smallCount - 1;
                increaseDApi(bigCount, id, smallCount).then(() => {
                    this.CommodityList()
                });
            } else {
                smallCount;
            }
        },
        //近页面渲染
        getInto(page, size) {
            searchApi(page, size)
                .then((res) => {
                    console.log(res)
                    this.searchData = res.data.data
                    this.total = res.data.count
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                })
        },
        currentchange(page) {
            this.getInto(page, this.size)
        },
        //查询结果
        searchList() {
            console.log(12121)
            searchlistApi(this.keyWord, this.page, this.size)
                .then((res) => {
                    console.log(res)
                    this.searchData = res.data.data
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                })
        },
        //商品明细渲染
        CommodityList() {
            CommodityApi(this.$route.query.row.id)
                .then((res) => {
                    console.log(res)
                    this.Commodity = res.data.data
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                })
        },
        //删除列表
        handleDelete(id) {
            console.log("删除id:", id);
            delDindanApi(id)
                .then((res) => {
                    console.log(res);
                    //删除提示
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.CommodityList();
                })
                .catch((err) => {
                    console.log(err);
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    })
                })
        },
        //添加
        addList(id) {
            let routeId = this.$route.query.row.id
            addListApi(id, routeId)
                .then((res) => {
                    console.log(res)
                    this.Commodity = res.data.data
                    this.CommodityList();
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                    this.$message({
                        type: 'info',
                        message: '添加失败'
                    })
                })
        },
        //赠品
        addgitf(id) {
            let routeId = this.$route.query.row.id
            addgitfApi(id, routeId)
                .then((res) => {
                    console.log(res)
                    this.Commodity = res.data.data
                    this.CommodityList();
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                    this.$message({
                        type: 'info',
                        message: '添加失败'
                    })
                })
        },
        // 提交信息
        submit() {
            submitEditApi(this.formData)
                .then((res) => {
                    this.$router.push("/dingdan/dingdan-list");
                    this.$message({
                        type: 'success',
                        message: '提交成功'
                    })
                    console.log(res)
                })
                 .catch((err) => {
                    console.log('获取列表失败', err)
                })
        }

    },
    computed: {
        getMoney() {
            return this.Commodity.reduce((sum, obj) => {
                return sum += +obj.money
            }, 0)
        },
        getnumber() {
            return this.Commodity.reduce((sum, obj) => {
                return sum += +obj.smallCount
            }, 0)
        },
        count() {
            var all = 0;
            for (let i = 0; i < this.Commodity.length; i++) {
                all += this.Commodity[i].money;
            }
            return all;
        },
    }
}
</script>